Что такое псевдоэлементы
Псевдоэлементы — это элементы, которых не существует в HTML-разметке. Они создаются и позиционируются исключительно при помощи CSS.
content
Обязательный параметр для псевдоэлементов
Когда задано свойство content , то элемент заменяется на значение этого свойства.
::before
Создать элемент перед родителем
Когда мы в CSS добавляем ::before к селектору, для соответствующего элемента создаётся псевдоэлемент.
::after
Создать элемент перед родителем
Когда мы в CSS добавляем ::after к селектору, для соответствующего элемента создаётся псевдоэлемент.
::placeholder
Стилизации текста-подсказки (плейсхолдера)
Псевдоэлемент ::placeholder используется для стилизации текста-подсказки (плейсхолдера) в полях ввода input и textarea.
::first-letter
Стилизации первой буквы первой строки
Псевдоэлемент ::first-letter позволяет задать стили для первой буквы первой строки блочного элемента, если перед текстом нет другого содержимого.
::first-line
Стилизации первой строки
Псевдоэлемент ::first-line позволяет задать стили для первой строки текста, расположенного внутри блочного элемента.
::selection
Стилизации выделения текста мышкой
Псевдоэлемент ::selection позволяет применить стили к пользовательскому выделению (например, к выделенному с помощью мыши тексту) и изменить его вид.
::marker
Маркерное поле
::marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.